<template>
	<div class="card__body-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<el-form  :model="state.queryParams" ref="queryFormRef" inline>
				<el-form-item>
					<el-button type="primary" @click="onQuery">
						<el-icon>
							<ele-Search />
						</el-icon>
						查 询
					</el-button>
					<el-button @click="onResetQuery">
						<el-icon>
							<ele-Refresh />
						</el-icon>
						重 置
					</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column label="成本" align="center" prop="cost" />
				<el-table-column label="销售额" align="center" prop="sale" />
				<el-table-column label="积分" align="center" prop="integral" />
				<el-table-column label="利润" align="center" prop="profit" />
				<el-table-column label="订单数" align="center" prop="orders_num" />
			</el-table>
			<PaginationComponent
				v-if="state.total"
				:total="state.total"
				v-model:page="state.queryParams.pageNum"
				v-model:limit="state.queryParams.pageSize"
				@pagination="getList"
			/>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="ordinaryUser">
import { onMounted, reactive, ref } from 'vue';

// 定义变量内容
const state = reactive({
	showSearch: true,
	queryParams: {
		type: '',
		pageNum:1,
		pageSize:10
	},
	tableList: [],
	loading: false,
	total: 0,
});
const queryFormRef = ref();

onMounted(() => {
	// getList();
});

/********** 触发事件 **********/
// 查询
const onQuery = () => {
	state.queryParams.pageNum = 1;
	getList();
};
// 重置查询
const onResetQuery = () => {
	queryFormRef.value.resetFields();
	onQuery();
};

/********** 方法事件 **********/
const getList = () => {
	state.loading = true;
};
/********** 网络事件 **********/
</script>
